<template>
  <div class="toolbar row q-gutter-x-sm no-wrap q-pr-sm text-no-wrap items-center">
    <q-btn :dense="isDense" :label="`V${packageJSON.version}`" class="text-bold" flat>
      <q-popup-proxy :offset="[0, 5]" anchor="bottom middle" breakpoint="0" class="overflow-hidden q-pa-md"
                     self="top middle" transition-hide="jump-up" transition-show="jump-down">
        <UpdateLogs></UpdateLogs>
      </q-popup-proxy>
      <q-tooltip v-bind="$tooltipAttr">
        {{ $t('UpdateLogs') }}
      </q-tooltip>
    </q-btn>
    <Lang v-if="false"></Lang>
    <UserInfo v-if="gtXS"></UserInfo>
    <q-btn v-if="notMobile" :dense="isDense" :icon="AppFullscreen.isActive ? 'fullscreen_exit' : 'zoom_out_map'"
           v-bind="btnBind" @click="toggleFullScreen">
      <q-tooltip v-bind="$tooltipAttr">
        {{ AppFullscreen.isActive ? $t('ExitFullScreen') : $t('FullScreen') }}
      </q-tooltip>
    </q-btn>
    <q-btn :dense="isDense" icon="power_settings_new" v-bind="btnBind" @click="logout">
      <q-tooltip v-bind="$tooltipAttr">
        <div class="text-no-wrap">{{ `${$t('ExitSystem')}` }}</div>
      </q-tooltip>
    </q-btn>
  </div>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import Lang from 'pages/Tools/Lang.vue'
import { AppFullscreen, useQuasar } from 'quasar'
import { userStores } from 'src/stores/user-stores'
import { createDialog } from 'src/utils/utils'
import { computed, inject, reactive } from 'vue'
import { useRouter } from 'vue-router'
import UpdateLogs from './UpdateLogs.vue'
import UserInfo from './UserInfo.vue'
import packageJSON from 'app/package.json'

const $q = useQuasar()
const router = useRouter()
const userStore = userStores()
const isDense = inject('isDense', true)

const gtXS = computed(() => $q.screen.gt.xs)
const notMobile = computed(() => !$q.platform.is.mobile)
const btnBind = reactive({ 'fab-mini': true, round: true, flat: true })

const toggleFullScreen = () => AppFullscreen.toggle()

const logout = () => {
  createDialog({
    msg: i18n.t('ExitTip')
  }, () => userStore.LOGOUT(async () => await router.replace('/login')).then(() => {}))
}
</script>